<script setup name="level">
import { getUserLevel, createUserLevel, updateUserLevel, deleteUserLevel, updateUserLevelStatus } from "@/api/level"
import { useInitTable, useInitForm } from "@/composables/useCommon"
import FormDialog from "@/components/FormDialog.vue"
import ListHeader from "@/components/ListHeader.vue"

// 引入公共方法
const { windowHeight, tableData, loading, currentPage, total, limit, getData, handleDelete, handleStatusChange, toast } = useInitTable({
  getList: getUserLevel,
  delete: deleteUserLevel,
  updateStatus: updateUserLevelStatus
})

// 解构表单公共方法
const { form, dialogRef, formRef, rules, dialogTitle, handleSubmit, handleCreate, handleEdit, resetForm } = useInitForm({
  getData,
  updata: updateUserLevel,
  create: createUserLevel,
  form: {
    name: "",
    level: 100,
    status: 1,
    discount: 0,
    max_price: 0,
    max_times: 0
  },
  rules: {
    name: [{ required: true, message: "会员等级名称不能为空", trigger: "blur" }],
    level: [{ required: true, message: "角色描述不能为空", trigger: "blur" }],
    status: [{ required: true, trigger: "blur" }],
    discount: [{ required: true, message: "折扣率不能为空", trigger: "blur" }]
  }
})

// 减去头部高度、标签高度、内边距高度
let h = windowHeight.value - 64 - 44 - 36
const h2 = windowHeight.value - 64 - 44 - 100
</script>

<template>
  <el-card shadow="never" :body-style="{ 'padding-bottom': '10px', 'padding-left': '0', 'padding-right': '0' }" :style="{ height: `${h}px` }">
    <ListHeader create="新增会员等级" @create="handleCreate" @refresh="getData" />
    <div class="card-table" :style="{ height: `${h2}px` }">
      <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
        <el-table-column prop="name" label="会员等级" align="center" fixed />
        <el-table-column prop="discount" label="折扣率(%)" align="center" />
        <el-table-column prop="level" label="等级序号" align="center" />
        <el-table-column label="状态" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              size="small"
              :active-value="1"
              :inactive-value="0"
              :loading="row.statusLoading"
              style="--el-switch-on-color: #13ce66"
              @change="handleStatusChange($event, row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="90" align="center">
          <template #default="{ row }">
            <el-tooltip effect="light" content="修改" placement="left">
              <el-icon @click="handleEdit(row)" class="edit">
                <Edit />
              </el-icon>
            </el-tooltip>
            <el-popconfirm width="180" title="是否要删除该记录？" confirmButtonText="确认" cancelButtonText="取消" @confirm="handleDelete(row.id)">
              <template #reference>
                <el-icon>
                  <CloseBold />
                </el-icon>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据" :image-size="200" />
        </template>
      </el-table>
      <!-- 分页 -->
      <div class="level-pagination">
        <el-pagination background small layout="prev, pager, next" :total="total" :current-page="currentPage" :page-size="limit" :hide-on-single-page="total < 11" @current-change="getData" />
      </div>
    </div>
    <!-- 修改会员等级 -->
    <FormDialog ref="dialogRef" :width="60" :title="dialogTitle" @submit="handleSubmit" @close="resetForm">
      <el-form :model="form" ref="formRef" :rules="rules" :inline="false">
        <el-form-item label="等级名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="等级权重" prop="level">
          <el-input-number v-model="form.level" placeholder="等级权重" />
        </el-form-item>
        <el-form-item label="角色状态" prop="status">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" style="--el-switch-on-color: #13ce66" />
        </el-form-item>
        <el-form-item label="升级条件">
          <div>
            <small class="total">累计消费满</small>
            <el-input type="number" v-model="form.max_price" :min="0" placeholder="累计消费" style="width: 50%">
              <template #append>元</template>
            </el-input>
            <small class="setLevel"> 设置会员等级所需要的累计消费必须大于等于0,单位：元 </small>
          </div>
          <div>
            <small class="total">累计次数满</small>
            <el-input type="number" v-model="form.max_times" :min="0" placeholder="累计次数" style="width: 50%">
              <template #append>%</template>
            </el-input>
            <small class="setLevel"> 设置会员等级所需要的购买量必须大于等于0,单位：笔 </small>
          </div>
        </el-form-item>
        <el-form-item label="折扣率(%)" prop="discount">
          <el-input type="number" v-model="form.discount" :min="0" placeholder="折扣率(%)" style="width: 50%">
            <template #append>%</template>
          </el-input>
          <small class="setLevel">折扣率单位为百分比，如输入90，表示该会员等级的用户可以以商品原价的90%购买</small>
        </el-form-item>
      </el-form>
    </FormDialog>
  </el-card>
</template>

<style lang="scss" scoped>
.el-card {
  border: 0;
  overflow-y: auto;

  .card-table {
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .el-table {
      z-index: 0;
      .el-icon {
        cursor: pointer;
      }
      .edit {
        margin: 0 8px;
      }
    }

    .level-pagination {
      display: flex;
      justify-content: center;
      padding-top: 10px;
    }
  }
  .tree-tag {
    display: flex;
    align-items: center;
    .el-tag {
      margin-right: 8px;
    }
  }
}
.total {
  margin-right: 4px;
}
.setLevel {
  color: #ccc;
  display: flex;
}

@media screen and (max-width: 375px), screen and (max-width: 414px) {
  :deep(.el-dialog--center) {
    min-width: 90% !important;
    max-width: 90% !important;
  }
}
</style>
